<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>点击图片放大预览</title>
    <style>
        div {
            display: flex;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        .img {
            width: 200px;
            height: 200px;
        }
    </style>
</head>

<body>
    <div>
        <img class="img"
            src="https://lh3.googleusercontent.com/zX24bpKXVM4u2sPzBs7Bure1BJX4gf8DjbsInZsAft3d9zDdo4A_C0kIHVWgDpPKZeWiXaoQFjCwrzzxcXZTfuUqa61prSIRyV7d8BI"
            alt="">
    </div>
</body>
<script>
    let img = document.getElementsByClassName('img')[0]
    let div = document.getElementsByTagName('div')[0]
    img.addEventListener('click', beLarge)
    function beLarge() {
        console.log(img.src);
        const img1 = document.createElement('img')
        img1.src = img.src
        img1.style = 'width:80%;height:95%'
        const div1 = document.createElement('div')
        div1.style = 'width:100%;height:100%;background: rgba(18, 18, 18, 0.65);position:absolute;top:0;'
        // const iframe = document.createElement('iframe')
        // iframe.appendChild(img1)
        // iframe.style = 'position:absolute;with:100%;height:100%'
        div1.appendChild(img1)
        document.body.appendChild(div1)
        div1.addEventListener('click', beSmall)
        function beSmall() {
            document.body.removeChild(div1)
        }
    }
</script>

</html>